<template>
	<view>
		<view class="top">
			<view class="user">
				<img :src="loginImgUrl" alt="" class="avatar" />
				<view class="info">
					<text class="nologin" v-if="!isLogin">请先登录/注册</text>
					<view class="login" v-else>
						<text class="name">雾气</text>
						<text class="company">@马铃木项目科研责任有限公司</text>
						<text class="id">ID:3541</text>
					</view>
				</view>

				<img src="/static/my_slices/Frame(11).png" alt="" />
			</view>

			<view class="tab">
				<view class="box">
					<img src="/static/my_slices/Frame(9).png" alt="" />
					<text class="describe">邀请同行使用有奖</text>
					<button>去邀请</button>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="card application">
				<text class="title">个人应用</text>
				<view class="ul">
					<view class="li">
						<img src="/static/my_slices/Group 468.png" alt="" />
						<text class="itemTitle">申请岗位</text>
					</view>
					<view class="li">
						<img src="/static/my_slices/Group 469.png" alt="" />
						<text class="itemTitle">项目资料</text>
					</view>
					<view class="li">
						<img src="/static/my_slices/Group 470.png" alt="" />
						<text class="itemTitle">我的订单</text>
					</view>
					<view class="li">
						<img src="/static/my_slices/Group 471.png" alt="" />
						<text class="itemTitle">项目合同</text>
					</view>
				</view>
			</view>

			<view class="card actionList">
				<view class="ul">
					<view class="li">
						<img src="/static/my_slices/Frame.png" alt="" />
						<text class="itemTitle">规范查询</text>
						<img src="/static/my_slices/Frame(4).png" alt="" />
					</view>
					<view class="li">
						<img src="/static/my_slices/Frame(1).png" alt="" />
						<text class="itemTitle">使用教程</text>
						<img src="/static/my_slices/Frame(4).png" alt="" />
					</view>
					<view class="li">
						<img src="/static/my_slices/Frame(2).png" alt="" />
						<text class="itemTitle">关注公众号</text>
						<img src="/static/my_slices/Frame(4).png" alt="" />
					</view>
					<view class="li">
						<img src="/static/my_slices/Frame(3).png" alt="" />
						<text class="itemTitle">联系我们</text>
						<img src="/static/my_slices/Frame(4).png" alt="" />
					</view>
					<view class="li">
						<img src="/static/my_slices/Frame(10).png" alt="" />
						<text class="itemTitle">系统设置</text>
						<img src="/static/my_slices/Frame(4).png" alt="" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const initAvatar = '/static/Ellipse 11_slices/Ellipse.png';

const isLogin = ref(false);
const loginImgUrl = ref(initAvatar);
</script>

<style lang="scss">
$tBackGroundImgUrl: '/static/my_slices/Component 7.png';
$tTabImgUrl: '/static/my_slices/Group 472.png';

.top {
	width: 100%;
	min-height: 238px;
	background-image: url($tBackGroundImgUrl);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	.user {
		padding: 0 20px;
		padding-top: 85px;
		width: 100%;
		display: flex;
		gap: 12px;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		.info {
			flex: auto;
			.nologin {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 18px;
				color: rgba(0, 0, 0, 0.9);
				line-height: 21px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.login {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 6px;
				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 18px;
					color: rgba(0, 0, 0, 0.9);
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.company {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 12px;
					color: rgba(0, 0, 0, 0.6);
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.id {
					flex-basis: 100%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 12px;
					color: rgba(0, 0, 0, 0.4);
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}

	.tab {
		position: absolute;
		top: 165px;
		width: 100%;
		height: 64px;
		background-image: url($tTabImgUrl);
		background-repeat: no-repeat;
		background-size: calc(100% - 24px) 100%;
		background-position: center;
		z-index: 100;
		padding: 0 28px;
		box-sizing: border-box;
		.box {
			height: 55px;
			display: flex;
			gap: 8px;
			align-items: center;
			justify-content: space-between;
			.describe {
				flex: auto;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 14px;
				color: #ffffff;
				line-height: 16px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			uni-button {
				margin: 0;
				width: auto;
				height: 25px;

				background: #ffffff;
				border-radius: 20px 20px 20px 20px;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 12px;
				color: #3e73fe;
				line-height: 25px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.button-hover {
				transition: all 0.3s;
				background-color: #e4e9ff;
			}
		}
	}
}

.content {
	position: relative;
	width: 100%;
	background-color: #f3f5f8;
	border-radius: 12px 12px 0px 0px;
	margin-top: -17px;
	z-index: 10;
	padding: 25px 16px 13px 16px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	gap: 10px;
	.card {
		width: 100%;
		height: auto;
		background: #ffffff;
		border-radius: 12px 12px 12px 12px;
		display: flex;
		flex-direction: column;
	}
	.application {
		height: 150px;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.9);
			line-height: 16px;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding: 16px 12px;
			box-sizing: border-box;
		}
		.ul {
			display: flex;
			justify-content: space-evenly;
			.li {
				display: flex;
				gap: 10px;
				justify-content: center;
				flex-direction: column;
				img {
					width: 50px;
					height: auto;
				}
				.itemTitle {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 12px;
					color: #1a1a1a;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}
	.actionList {
		padding: 0 12px;
		box-sizing: border-box;
		.ul {
			.li {
				padding: 20px 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 10px;
				border-bottom: 1px solid #e7e7e7;

				&:last-child {
					border-bottom: none;
				}

				img {
					width: 20px;
					height: auto;
				}
				.itemTitle {
					flex: auto;

					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 14px;
					color: #1a1a1a;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}
}
</style>
